<template>
  <div>
    <div class="center-box">
      <v-puzzle :on-success="test"
                width="260"
                height="120"
                pl-size="30"
                deviation="5"
                :puzzle-img-list="imgList"
                style="width: 90%;">
      </v-puzzle>
    </div>
  </div>
</template>

<script>
import vPuzzle from '../component/puzzle'
import imageUrl from '../../../static/js/imageUrl'

export default {
  name: 'puzzleUseCase',
  components: {
    vPuzzle
  },
  data () {
    return {
      imgList: [ // 可从配置文件取
        imageUrl.puzzleBG1,
        imageUrl.puzzleBG2,
        imageUrl.puzzleBG3,
        imageUrl.puzzleBG4,
      ]
    }
  },
  methods: {
    test () {
      alert('用例页的方法回调成功了')
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>

<style scoped>
  .center-box {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }
</style>
